/**
* 上传视频
*/ 
<template>
  <div>
    <el-upload
      :disabled="forbidden"
      list-type="picture-card"
      :action="mAction"
      accept=".mp4,.ogg,.flv,.avi,.wmv,.rmvb,.mov"
      :on-progress="uploadVideoProcess"
      :on-success="handleVideoSuccess"
      :show-file-list="false"
    >
      <video
        v-if="videoForm.showVideoPath != '' && !videoFlag"
        :src="videoForm.showVideoPath"
        style="
          width: 346px;
          max-height: 180px;
          position: absolute;
          height: 160px;
          left: -1px;
          background: #000;
          top: -1px;
        "
        controls="controls"
      >
        您的浏览器不支持视频播放
      </video>
      <i
        v-else-if="videoForm.showVideoPath == '' && !videoFlag"
        class="el-icon-plus avatar-uploader-icon"
      ></i>
      <!-- <i v-if="videoFlag == true" class="el-icon-loading"></i> -->
      <el-progress
        v-if="videoFlag == true"
        type="circle"
        :percentage="videoUploadPercent"
        style="margin-top: 7px"
      >
      </el-progress>
    </el-upload>
  </div>
</template>
<script>
import $ from "jquery";
export default {
  name: "videoUpload",
  //子组件访问父组件数据的唯一接口
  props: {
    mAction: { type: String }, //action请求
    videoUrl: { type: String }, //视频地址
    forbidden: { type: Boolean, default: false }, //是否禁用
  },
  data() {
    return {
      videoFlag: false,
      //是否显示进度条
      videoUploadPercent: "",
      //进度条的进度，
      isShowUploadVideo: false,
      //显示上传按钮
      aliyunOssToken: {},
      videoForm: {
        showVideoPath: "",
      },
    };
  },
  //通过watch来监听message是否改变
  watch: {},
  // 创建完毕状态(里面是操作)
  created() {
      this.getupload();

  },

  mounted() {
    if (this.videoUrl) {
      this.videoForm.showVideoPath = this.videoUrl;
    } else {
      this.videoForm.showVideoPath = "";
    }
  },
  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    handleChange(files, fileList) {
      this.uploadSectionFile(files);
      //获取最后一次得到的文件
    },
    getupload() {
      var tData = {
        action: "/common/upload/token",
        headers: this.abdpConfig.getApiJson(),
        data: {},
      };
      this.abdpAjax.http(tData).then((rsp) => {
        if (rsp.data.code == 200) {
          this.aliyunOssToken = rsp.data.data;
        } else {
          this.$message.error(rsp.data.message);
        }
      });
    },
    //自定义上传行为
    uploadSectionFile(params) {
      var _self = this;
      _self.videoFlag = true;
      _self.videoUploadPercent = 0;
      var getSuffix = function (fileName) {
        var pos = fileName.lastIndexOf(".");
        var suffix = "";
        if (pos != -1) {
          suffix = fileName.substring(pos);
        }
        return suffix;
      };
      var filename = new Date().getTime() + getSuffix(params.file.name);
      var formData = new FormData();
      //注意formData里append添加的键的大小写
      formData.append("name", filename); //存储在oss的文件路径
      formData.append("key", _self.aliyunOssToken.dir + filename); //存储在oss的文件路径
      // formData.append("key", _self.aliyunOssToken.dir); //存储在oss的文件路径
      formData.append("OSSAccessKeyId", _self.aliyunOssToken.accessid); //accessKeyId
      formData.append("policy", _self.aliyunOssToken.policy); //policy
      formData.append("Signature", _self.aliyunOssToken.signature); //签名
      //如果是base64文件，那么直接把base64字符串转成blob对象进行上传就可以了
      formData.append("file", params.file);
      formData.append("success_action_status", 200); //成功后返回的操作码
      // var tex=_self.aliyunOssToken.host.substr(1,_self.aliyunOssToken.host.length-1)
      var url = _self.aliyunOssToken.host;
      var fileUrl =
        _self.aliyunOssToken.host + "/" + _self.aliyunOssToken.dir + filename;
      // client.multipartUpload(key, file, {
      //   progress: progress
      // }).then(function (res) {
      //   console.log('upload success: %j', res);
      // });

      $.ajax({
        url: url,
        type: "POST",
        data: formData,
        // async: false,
        cache: false,
        contentType: false,
        withCredentials: true,
        processData: false,
        success: function (res) {
          _self.$emit("getVideoUrl", fileUrl);
          _self.videoFlag = false;
        },
        error: function (data) {
          _self.videoFlag = false;
        },
      });
    },
    //上传前回调
    beforeUploadVideo(file) {
      // 获取上传阿里云服务器需要的参数
      // var fileSize = file.size / 1024 / 1024 < 800;
      // if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) == -1) {
      //   this.$message.error("请上传正确的视频格式");
      //   return false;
      // }
      // if (!fileSize) {
      //   this.$message.error("视频大小不能超过800MB");
      //   return false;
      // }
      this.isShowUploadVideo = false;
    },
    //进度条
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true;
      this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },
    //上传成功回调
    handleVideoSuccess(res, file) {
      this.isShowUploadVideo = true;
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      // console.log("上传成功")
      //前台上传地址
      if (res.code == "200") {
        this.videoForm.showVideoPath = res.data;
        this.$emit("getVideoUrl", res.data);
      } else {
        this.$message.error(res.message);
      }
    },
  },
};
</script>
<style>
</style>